<template>
  <div>
    <el-collapse-transition>
      <div>
        <!--内容-->
        <div class="content">
          <div class="content app-main-content-box">
            <!--筛选-->
            <div class="filter-container">
              <el-form
                ref="filterForm"
                :inline="true"
                :model="filterForm"
                size="small"
                :rules="rules"
              >
                <el-form-item prop="businessName" label="商户简称：">
                  <el-input
                    v-model="filterForm.businessName"
                    placeholder="请输入商户简称"
                    maxlength="50"
                  />
                </el-form-item>
                <el-form-item prop="phone" label="商户手机号：">
                  <el-input
                    v-model="filterForm.phone"
                    placeholder="请输入商户手机号"
                    maxlength="11"
                  />
                </el-form-item>
                <el-form-item prop="shopName" label="门店：">
                  <el-input
                    v-model="filterForm.shopName"
                    placeholder="请输入门店简称"
                    maxlength="50"
                  />
                </el-form-item>
                <el-form-item prop="status" label="状态：">
                  <el-select
                    v-model="filterForm.status"
                    placeholder="请选择状态"
                  >
                    <el-option label="全部" value=""></el-option>
                    <el-option
                      :label="item"
                      v-for="(item, index) in statusOptions"
                      :key="index"
                      :value="index"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="search">搜索</el-button>
                  <el-button @click="reset">重置</el-button>
                  <el-button
                    @click="deleteShop()"
                    type="danger"
                    :disabled="deleteArr.length <= 0"
                    >批量删除</el-button
                  >
                  <el-button type="primary" @click="openAddPop()"
                    >新增</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              element-loading-text="加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.6)"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                prop="businessName"
                label="商户简称"
                align="center"
                min-width="120"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.businessName || "--" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="phone" label="手机号" align="center">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.phone || "--" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="businessType"
                label="商户类型"
                align="center"
              >
                <template slot-scope="scope">
                  <div>
                    {{ businessTypeOptions[scope.row.businessType] }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="shopName"
                min-width="130"
                label="门店简称"
                align="center"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.shopName || "--" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="sortId" label="排序" align="center" />
              <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                  <div>
                    {{ statusOptions[scope.row.status] }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="updateTime"
                label="更新时间"
                align="center"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.updateTime || "--" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" min-width="80" right>
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    size="mini"
                    @click="operationShop(1, scope.row)"
                    >删除</el-button
                  >
                  <el-button
                    :type="scope.row.status == 1 ? 'danger' : 'primary'"
                    size="mini"
                    @click="operationShop(2, scope.row)"
                    >{{ scope.row.status == 1 ? "停用" : "启用" }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!--分页器-->
            <pagination-direction
              v-if="paginationConfig.total !== 0"
              :config="paginationConfig"
              @sizeschange="sizesChange"
              @pagechange="pageChange"
            />
          </div>
        </div>
      </div>
    </el-collapse-transition>
    <AddShop ref="AddShop" @addMethods="initData" />
  </div>
</template>
  
  <script>
import AddShop from "./components/AddShop";
import {
  getConfigList,
  updateShopStatus,
  deletedConfigShop,
  getIndustry,
} from "@/publicApi/publicDomain";
import { validateMobilePhone } from "@/utils/validate.js";

export default {
  components: {
    AddShop,
  },

  data() {
    const validateTelPhone = (rule, value, callback) => {
      if (value) {
        if (!validateMobilePhone(value)) {
          callback(new Error("请输入正确手机号"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      tableData: [],
      /* 查询条件*/
      //筛选
      filterForm: {
        status: "",
        businessName: "",
        phone: "",
        shopName: "",
      },
      //分享打开的表单
      dialogFormVisible: false,
      //分页配置
      paginationConfig: {
        page: 1,
        pageSize: 10,
        pageType: "",
        total: 0,
        pageSizes: [10, 20], // 分页pages
        layout: "total, sizes, prev, pager, next, jumper", // 分页类型
        direction: "center", // 分页位置
      },
      statusOptions: {
        0: "停用",
        1: "启用",
      },
      businessTypeOptions: {
        1: "餐饮",
        2: "便利店",
        3: "休闲娱乐",
        4: "美容美发",
      },
      deleteArr: [],
      showAddShop: false,
      rules: {
        phone: [
          {
            validator: validateTelPhone,
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  mounted() {
    getIndustry().then((res) => {
      res.code === 0 ? (this.businessTypeOptions = res.data) : "";
    });
    //请求表格数据
    this.initData();
  },
  computed: {},
  methods: {
    //请求数据
    initData() {
      this.$nextTick(() => {
        let {
          paginationConfig: { page: pageNum, pageSize },
          filterForm,
        } = this;
        this.$refs.filterForm.validate((valid, error) => {
          if (valid) {
            this.loading = true;
            let params = Object.assign({}, filterForm, { pageNum, pageSize });
            console.log(params);
            getConfigList(params)
              .then((res) => {
                this.tableData = res.data.list;
                this.paginationConfig.total = res.data.total;
                this.paginationConfig.page = res.data.pageNum;
              })
              .finally(() => {
                this.loading = false;
              });
          }
        });
      });
    },
    search() {
      this.paginationConfig.page = 1
      this.initData();
    },
    //重置
    reset() {
      this.paginationConfig.page= 1
      this.$refs.filterForm.resetFields();
      this.initData();
    },
    // 分页sizes改变
    sizesChange() {
      this.initData();
    },

    // 分页page改变
    pageChange() {
      this.initData();
    },
    deleteShop() {
      this.$confirm("是否要删除选中的商户？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let { deleteArr } = this;
        deletedConfigShop(deleteArr).then((res) => {
          if (res.code === 0) {
            this.$message.success("删除成功");
            this.initData();
          }
        });
      });
    },
    handleSelectionChange(val) {
      this.deleteArr = val.map((item) => item.id);
    },
    operationShop(type, row) {
      // type 1 删除   2停用或者启用
      let { status: rowStatus, id } = row;
      this.$confirm(
        type == 1
          ? "是否删除该推荐门店？"
          : `是否${rowStatus == 1 ? "停用" : "启用"}该门店？`,
        "提示",
        {
          center: true,
          type: "warning",
        }
      ).then(() => {
        if (type == 1) {
          deletedConfigShop([id]).then((res) => {
            if (res.code === 0) {
              this.$message.success("删除成功");
              this.initData();
            }
          });
        } else {
          updateShopStatus({ id, status: rowStatus == 1 ? 0 : 1 }).then(
            (res) => {
              if (res.code === 0) {
                this.$message.success("操作成功");
                this.initData();
              }
            }
          );
        }
      });
    },
    openAddPop() {
      this.$refs.AddShop.openPop();
    },
  },
};
</script>
  
  <style rel="stylesheet/scss" lang="scss" scoped>
//头部
.top {
  padding: 0px 60px 0;
  border-radius: 5px 5px;
  background-color: #fff;
  margin-bottom: 10px;

  .title {
    font-size: 20px;
  }

  .el-button {
    margin-left: 30px;
  }
}

//内容
.content {
  padding: 0px 30px 24px;
  border-radius: 5px;
  background-color: #fff;
}

//筛选
.el-form {
  padding-top: 30px;

  // .el-select {
  //   padding-left: 50px;
  // }

  .el-date-editor {
    width: 400px;
  }

  .el-button {
    margin: 0 5px;
    padding: 10px 30px;
  }
}

//表格
.el-table {
  text-align: center;

  .el-button {
    padding: 5px 10px;
    font-size: small;
  }
}

//分页器
.el-pagination {
  margin-top: 50px;
}
</style>
  